<script setup lang="ts">
import { fetchCommunities, fetchPatients, type Patient } from '@/api/admin/historyRecord'

const router = useRouter()

const form = ref({
  community_code: '',
  name_contains: '',
  mrn_contains: '',
})

const listData = ref<Array<Patient>>([])

const pagination = ref({
  currentPage: 1,
  total: 0,
  pageSize: 50,
})

const loading = ref(false)

const communities = ref<string[]>([])

const getCommunities = async () => {
  try {
    const response = await fetchCommunities()
    if (response) {
      communities.value = response.items || []
    } else {
      communities.value = []
    }
  } catch (error: any) {
    ElMessage.error(error?.errorDetails.description || error?.message || '未知错误')
  }
}

const getPatients = async () => {
  loading.value = true
  try {
    const response = await fetchPatients({
      page: pagination.value.currentPage,
      size: pagination.value.pageSize,
      ...form.value,
    })
    if (response) {
      listData.value = response.items || []
      pagination.value.total = response.total_items || 0
    } else {
      listData.value = []
    }
  } catch (error: any) {
    ElMessage.error(error?.errorDetails.description || error?.message || '未知错误')
  } finally {
    loading.value = false
  }
}

const handleCurrentChange = (page: number) => {
  pagination.value.currentPage = page
  getPatients()
}

const handleReset = () => {
  form.value.community_code = ''
  form.value.name_contains = ''
  form.value.mrn_contains = ''
}

const handleRowClick = (row: Patient) => {
  router.push({
    path: `/singleRecord`,
    query: {
      medical_record_number: row.medical_record_number,
    },
  })
}

onMounted(() => {
  getCommunities()
})
</script>

<template>
  <div class="h-full flex flex-col">
    <el-form :model="form" label-width="70">
      <el-row :gutter="8">
        <el-col :span="6">
          <el-form-item
            label="社区"
            :rules="{ required: true, message: '请选择社区', trigger: 'change' }"
          >
            <el-select v-model="form.community_code" placeholder="请选择社区">
              <el-option
                v-for="community in communities"
                :key="community"
                :label="community"
                :value="community"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="姓名">
            <el-input
              v-model.trim="form.name_contains"
              clearable
              placeholder="请输入姓名"
            /> </el-form-item
        ></el-col>
        <el-col :span="6">
          <el-form-item label="病历号">
            <el-input
              v-model.trim="form.mrn_contains"
              clearable
              placeholder="请输入病历号"
            /> </el-form-item
        ></el-col>
        <el-col :span="6">
          <el-form-item label-width="0">
            <el-button type="primary" class="mr-2" @click="handleCurrentChange(1)">查询</el-button>
            <el-button @click="handleReset">重置</el-button>
          </el-form-item></el-col
        >
      </el-row>
    </el-form>
    <el-table
      border
      v-loading="loading"
      :data="listData"
      header-row-class-name="table-brand-header"
      @row-click="handleRowClick"
    >
      <el-table-column type="index" label="序号" align="center" width="100" show-overflow-tooltip />
      <el-table-column prop="name" label="姓名" align="center" show-overflow-tooltip />
      <el-table-column
        prop="medical_record_number"
        label="病历号"
        align="center"
        show-overflow-tooltip
      />
    </el-table>
    <div class="flex items-center mt-4">
      <ivs-pagination v-bind="pagination" @current-change="handleCurrentChange" />
      <el-button type="primary" class="ml-2">跳转</el-button>
    </div>
  </div>
</template>
